<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
          rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic"
          rel="stylesheet" type="text/css">

</head>
<body>
<!-- header wrap-->
<div class="header_wrap">
    <div class="container">
        <!-- header -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header">
                <div class="header_left">
                    <a href="index.html#0">
                        <i class="glyphicon glyphicon-leaf" aria-hidden="true"></i>
                        Spa<span>Magic Of Soul</span>
                    </a>
                </div>
                <div class="header_right">
                    <ul>
                        <li><a href="#" class="facebook"></a></li>
                        <li><a href="#" class="g"></a></li>
                        <li><a href="#" class="twitter"></a></li>
                    </ul>
                </div>
                <div class="header_middle">
                    <span class="menu"><img src="images/menu.png" alt=" "></span>
                    <ul class="nav_list">
                        <li class="nav_item active">
                            <a href="index.html#0">
                                Home
                                <i class="glyphicon glyphicon-home" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li class="nav_item">
                            <a href="services.html#1">
                                Services
                                <i class="glyphicon glyphicon-hand-right" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li class="nav_item">
                            <a href="about.html#2">
                                About
                                <i class="glyphicon glyphicon-star-empty" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li class="nav_item">
                            <a href="blog.html#3">
                                Blog
                                <i class="glyphicon glyphicon-picture" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li class="nav_item">
                            <a href="contact.html#4">
                                Contact
                                <i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="header_info">
                    <h1>Feeling The Life In A Different Way</h1>
                    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born, a complete account of the system, and expound the actual teachings of the great explorer of the truth, and the master-builder of human happiness will unfold in</p>
                    <div class="more">
                        <a href="javascript:;">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--// header wrap-->
<script>
    $(function () {
        $(".nav_item").click(function () {
            $(this).addClass("active").siblings().removeClass("active")
        });
        var isShow = true;
        $(".menu").click(function () {
            if (isShow) {
                $("ul.nav_list").slideDown(300)
            } else {
                $("ul.nav_list").slideUp(300)
            }
            isShow = !isShow
        });
        /*根据地址栏的hash值 来设置头部导航内的子项的绿色背景*/
        var hash=window.location.hash.substr(1);
        $(".nav_item").eq(hash).addClass("active").siblings().removeClass("active")
    })
</script>
</body>
</html>